<template>
  <div>
    <el-group-title class="ccui-group-wrapper">
      <template slot="groupTitle">
        <el-form
          :model="form"
          label-width="160px"
          class="ccui-form"
          style="overflow: visible"
        >
          <div class="extend-btn">
            <!-- <el-button plain type="single-number" @click="ocrRemand"> Ocr识别 </el-button> -->
            <el-dropdown
              plain
              type="single-number"
              placement="bottom"
              trigger="click"
              style="margin-right: 10px"
              @command="handleCommand"
            >
              <el-button type="single-number">
                发票导入
                <i class="el-icon-arrow-down" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in dropdownArr"
                  :key="index"
                  :command="item.command"
                >
                  {{ item.text }}
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-upload
                    multiple
                    :show-file-list="false"
                    :action="uploadUrl"
                    :on-success="onSuccess"
                    :on-error="onError"
                    :on-progress="onProgress"
                    :before-upload="beforeUpload"
                    :headers="headers"
                    accept=""
                    style="display: inline-block; margin-right: 10px"
                  >
                    OCR识别
                    <!-- <el-button plain type="single-number">OCR识别</el-button> -->
                  </el-upload>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button plain type="single-number" @click="addLine">
              新增行
            </el-button>
            <el-button plain type="single-number" @click="VolumeSet">
              批量设置
            </el-button>
            <el-button plain type="single-number" @click="copyLine">
              复制行
            </el-button>
            <el-button plain type="single-number" @click="deleteRow">
              删除行
            </el-button>
          </div>
          <el-table
            :data="tableData"
            style="margin-bottom: 20px; width: 100%"
            class="ccui-form-child-table"
            border
            @select-all="handleCheckAllChange"
            @select="handleCheckChange"
            @selection-change="selectionLineChangeHandle"
            :header-cell-class-name="must"
            :summary-method="getSummaries"
            lazy
            show-summary
            ref="tableList"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" type="index" width="55" fixed />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="invoiceTypeName"
              label="发票类型"
              fixed
              width="200"
            >
              <template slot-scope="scope">
                <el-select
                  :disabled="scope.row.state === 1"
                  v-model="scope.row.invoiceTypeName"
                  placeholder="请选择"
                  @change="getSelect"
                >
                  <el-option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              prop="invoiceCode"
              label="发票代码"
              width="200"
            >
              <template slot-scope="scope">
                <el-input
                  :disabled="scope.row.state === 1"
                  v-model="scope.row.invoiceCode"
                  maxlength="100"
                  show-word-limit
                  placeholder="请输入"
                >
                </el-input>
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              prop="invoiceNo"
              label="发票号码"
              width="150"
            >
              <template slot-scope="scope">
                <el-input
                  :disabled="scope.row.state === 1"
                  v-model="scope.row.invoiceNo"
                  maxlength="100"
                  show-word-limit
                  placeholder="请输入"
                >
                </el-input>
              </template>
            </el-table-column>

            <!-- <el-table-column
              :show-overflow-tooltip="true"
              prop="ratePercent"
              label="税率"
              width="150"
            >
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.ratePercent"
                  placeholder="请选择税率"
                  style="width: 100%"
                  @change="handleChange(scope.row)"
                >
                  <el-option
                    v-for="item in Enum.taxRatePercentList"
                    :key="item.dicKey"
                    :label="item.dicValue"
                    :value="item.dicValue"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column> -->
            <el-table-column
              :show-overflow-tooltip="true"
              prop="priceTaxTotal"
              label="价税合计"
              width="200"
              align="right"
              header-align="left"
            >
              <template slot-scope="scope">
                <el-input
                  :disabled="scope.row.state === 1"
                  width="200"
                  v-model="scope.row.priceTaxTotal"
                  maxlength="13"
                  placeholder="请输入"
                  @blur="blurPriceTaxTotal($event, scope.row)"
                >
                </el-input>
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              prop="tax"
              label="税额"
              width="200"
              align="right"
              header-align="left"
            >
              <template slot-scope="scope">
                <el-input
                  :disabled="scope.row.state === 1"
                  v-model="scope.row.tax"
                  placeholder="请输入"
                  maxlength="13"
                  @blur="blurTax($event, scope.row)"
                />
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              prop="amountExcludeTax"
              label="不含税金额"
              width="200"
              align="right"
              header-align="left"
            >
              <template slot-scope="scope">
                <el-input
                  :disabled="scope.row.state === 1"
                  width="200"
                  v-model="scope.row.amountExcludeTax"
                  maxlength="13"
                  placeholder="请输入"
                  @blur="blurAmountExcludeTax($event, scope.row)"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              prop="invoiceDate"
              label="开票日期"
              width="150"
            >
              <template slot-scope="scope">
                <el-date-picker
                  :disabled="scope.row.state == 1"
                  v-model="scope.row.invoiceDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 100%"
                >
                </el-date-picker>
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              prop="seller"
              label="销售方名称"
              width="213"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.seller"
                  placeholder="请输入"
                  clearable
                  :disabled="scope.row.state === 1"
                  width="200"
                >
                </el-input>
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              prop="purchaser"
              label="购买方名称"
              width="150"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.purchaser"
                  placeholder=""
                  clearable
                  :disabled="scope.row.state === 1"
                >
                </el-input>
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              prop="remake"
              label="备注"
              width="150"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remake"
                  placeholder="请输入"
                  clearable
                >
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </template>
    </el-group-title>

    <el-dialog title="发票类型" :visible.sync="dialogVisible" width="430px">
      <span>发票类型：</span>
      <span>
        <el-select
          v-model="selectItem"
          placeholder="请选择"
          @change="handleSelect"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </span>
      <span slot="footer" class="dialog-footer">
        <span class="tips">引入或导入的发票不可修改发票类型</span>
        <el-button
          size="mini"
          type="default-mini"
          @click="dialogVisible = false"
          >取消</el-button
        >
        <el-button size="mini" type="primary-font-mini" @click="conformChange"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <!-- 发票导入 -->
    <keep-alive>
      <invoiceSelect
        v-if="dialogInvoice"
        style="display: inline-block; height: 20px"
        @invoiceData="handleInvoiceSelect"
        @closeFlag="handleClose"
        ref="invoiceIn"
      />
    </keep-alive>

    <!-- 批量导入普票 -->
    <allInvoiceIn ref="allInvoiceIn" @handleAllInvoice="handleAllInvoice" />
  </div>
</template>

<script>
import Cookies from "js-cookie";
import invoiceSelect from "./invoiceSelect";
import { generateUUID } from "@/basa/utils";
import { addUrlPerFix } from "@/basa/utils";
import { invoiceOcr } from "../api";
import { mapGetters } from "vuex";
import allInvoiceIn from "./allInvoiceIn";
import { formatNumber } from "../../../../basa/utils";
export default {
  name: "invoiceTableInfo",
  components: {
    invoiceSelect,
    allInvoiceIn,
  },
  props: {
    // tableData: Array
    tableInfo: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      dropdownArr: [
        {
          command: "invoiceIn",
          text: "引入发票",
        },
        {
          command: "allInvoiceIn",
          text: "批量导入(普票)",
        },
      ],
      dialogInvoice: false,
      form: {},
      selectVal: [],
      dialogVisible: false,
      selectItem: "",
      options: {
        1: "专票",
        2: "普票",
      },
      uploadUrl: addUrlPerFix(process.env.VUE_APP_UPLOAD_URL),
      headers: {
        Authorization: Cookies.get("access_token") || "",
      },
      tableData: [], //表格数据
      uploadList: [],
      uploadLoading: null,
      Enum: {
        taxRatePercentList: [],
      }, //获取税率接口
    };
  },
  created() {
    console.log(addUrlPerFix("/apis/smp/invocebasic/invoiceOcr"));
  },
  watch: {
    tableInfo: {
      handler: function (n) {
        console.log("值变化了", n);
        this.tableData = n;
        // this.tableData.forEach(e => {
        //   e.amountExcludeTax = Number(e.amountExcludeTax).toFixed(2);
        //   e.tax = Number(e.tax).toFixed(2);
        //   e.priceTaxTotal = Number(e.priceTaxTotal).toFixed(2);
        //   if(e.invoiceNum){
        //       e.invoiceNum = formatNumber(e.invoiceNum, 3)
        //   }
        // })//税价合计监控;
      },
      deep: true,
    },
  },
  methods: {
    // dropdown 事件
    handleCommand(val) {
      if (val === "invoiceIn") {
        //发票引入
        this.dialogInvoice = true;
        this.areaDetail = {};
        this.$nextTick(() => {
          this.$refs["invoiceIn"].dialogTableVisibletextarea = true;
        });
      } else if (val === "allInvoiceIn") {
        console.log(val); //发票导入
        this.$refs["allInvoiceIn"].allDialogInvoice = true;
      }
    },
    handleClose(v) {
      this.dialogInvoice = false;
      this.$refs["invoiceIn"].dialogTableVisibletextarea = false;
    },
    handleInvoiceSelect(t) {
      this.dialogInvoice = false;
      this.$refs["invoiceIn"].dialogTableVisibletextarea = false;
      t.forEach((e) => {
        e.priceTaxTotal = Number(e.priceTaxTotal).toFixed(2);
        e.tax = Number(e.tax).toFixed(2);
        e.amountExcludeTax = Number(e.amountExcludeTax).toFixed(2);
      });
      this.tableData.push(...t);
      console.log(t);
      this.$bus.$emit("tableLength", formatNumber(this.tableData.length, 0));
    },
    handleAllInvoice(data) {
      data.forEach((e) => {
        e.priceTaxTotal = Number(e.priceTaxTotal).toFixed(2);
        e.tax = Number(e.tax).toFixed(2);
        e.amountExcludeTax = Number(e.amountExcludeTax).toFixed(2);
      });
      this.tableData.push(...data);
      this.$bus.$emit("tableLength", formatNumber(this.tableData.length, 0));
    },
    // getPostGetEnum() {
    //   const arr = [
    //     "getTaxRateDict" // 查询税率字典数据
    //   ];
    //   for (let i = 0; i < arr.length; i++) {
    //     const element = arr[i];
    //     postGetEnum(element).then(res => {
    //       this.Enum[Object.keys(this.Enum)[i]] = res.data.data;
    //     });
    //   }
    // },
    // handleChange(row) {
    //     console.log(row)

    //     let rateCode = this.Enum.taxRatePercentList.filter(item => {
    //         return item.dicValue === row.ratePercent;
    //     })[0].dicKey;
    //     console.log(rateCode)
    //     let rate;
    //     if(row.ratePercent == "免税"){
    //         rate = 0
    //     }else{
    //         rate = Number((row.ratePercent).split("%")[0]) / 100
    //     }
    //     this.$set(row,"rate",rate)
    //     this.$set(row,"rateCode",rateCode)
    // },
    setInvoiceOcr(fileUrl) {
      invoiceOcr({ url: fileUrl }).then((res) => {
        this.$message({
          showClose: true,
          message: res.data.message,
          type: "success",
          ccuiCustom: true,
        });
        console.log("识别后的发票信息", res.data.data.invoceInfo);
        // 过滤ocr识别后的数据
        let resultData = [
          {
            amountExcludeTax: "",
            invoiceCode: "",
            invoiceDate: "",
            invoiceNo: "",
            invoiceTypeName: "",
            priceTaxTotal: "",
            ratePercent: "",
            rateCode: "",
            rate: "",
            tax: "",
            id: "",
            deductionTax: "",
            remake: "",
            // remark:""
          },
        ];
        let c = res.data.data;
        resultData[0].id = generateUUID();
        resultData[0].invoiceTypeName = c.invoceInfo[0].invoiceTypeName;
        resultData[0].invoiceNo = c.invoceInfo[0].invoiceNo;
        resultData[0].invoiceCode = c.invoceInfo[0].invoiceCode;
        resultData[0].ratePercent = c.invoceInfo[0].ratePercent;
        resultData[0].priceTaxTotal = c.invoceInfo[0].priceTaxTotal;
        resultData[0].tax = c.invoceInfo[0].tax;
        resultData[0].amountExcludeTax = c.invoceInfo[0].amountExcludeTax;
        resultData[0].invoiceDate = c.invoceInfo[0].invoiceDate;
        resultData[0].remake = c.invoceInfo[0].remake;
        resultData[0].rateCode = c.invoceInfo[0].rateCode
          ? c.invoceInfo[0].rateCode
          : "";
        resultData[0].rate = c.invoceInfo[0].rate;
        resultData[0].deductionTax = c.invoceInfo[0].deductionTax
          ? c.invoceInfo[0].deductionTax
          : "";
        resultData.forEach((ele) => {
          ele.priceTaxTotal = Number(ele.priceTaxTotal).toFixed(2);
          ele.tax = Number(ele.tax).toFixed(2);
          ele.amountExcludeTax = Number(ele.amountExcludeTax).toFixed(2);
          ele.invoiceDate = ele.invoiceDate
            ? ele.invoiceDate.substring(0, 10)
            : "";
          if (ele.rate > 1) {
            ele.rate = ele.rate / 100;
          }
        });
        // this.tableData=this.tableData.concat(resultData)
        this.tableData.push(...resultData); //由于concat会返回一个新的数组，不会触发watch监听，如果这里修改原tabledata数据会导致触发监听，重置tabledata数据
        this.$bus.$emit("tableLength", formatNumber(this.tableData.length, 0));
      });
    },
    handleCheckAllChange() {},
    handleCheckChange() {},
    selectionLineChangeHandle(val) {
      this.selectVal = val;
    },
    // 新增行
    addLine() {
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = y + "-" + m + "-" + d;
      this.tableData.push({
        id: generateUUID(),
        invoiceTypeName: "", //发票类型
        invoiceNo: "", //发票号码
        invoiceCode: "", //发票代码
        priceTaxTotal: "", //价税合计
        rate: "", //税率
        tax: "", //税额
        amountExcludeTax: "", //不含税金额
        // deductionTax: "", //可抵扣税额
        invoiceDate: time, //开票日期
        seller: "", //销售方
        purchaser: "", //购买方
        remark: "",
        ratePercent: "",
        rateCode: "",
      });
      this.$bus.$emit("tableLength", formatNumber(this.tableData.length, 0));
      this.$refs.tableList.clearSelection();
    },
    // 复制行
    copyLine() {
      if (this.selectVal.length <= 0) {
        // this.$message({
        //   showClose: true,
        //   message: ,
        //   type: "error",
        //   ccuiCustom: true
        // });
        this.$showErrorMessage("请至少选择一项");
        return;
      }
      this.tableData.push(
        ...this.selectVal.map((v, i) => ({
          id: generateUUID(),
          invoiceTypeName: v.invoiceTypeName, //发票类型
          invoiceNo: v.invoiceNo, //发票号码
          invoiceCode: v.invoiceCode, //发票代码
          priceTaxTotal: v.priceTaxTotal, //价税合计
          rate: v.rate, //税率
          tax: v.tax, //税额
          amountExcludeTax: v.amountExcludeTax, //不含税金额
          //   deductionTax: v.deductionTax, //可抵扣税额
          invoiceDate: v.invoiceDate, //开票日期
          seller: v.seller, //销售方
          purchaser: v.purchaser, //购买方
          remake: v.remake,
          ratePercent: v.ratePercent,
          rateCode: v.rateCode,
        }))
      );
      console.log(this.tableData);
      this.$bus.$emit("tableLength", formatNumber(this.tableData.length, 0));
      this.$refs.tableList.clearSelection();
    },
    // 删除行
    deleteRow() {
      if (this.selectVal.length <= 0) {
        // this.$message({
        //   showClose: true,
        //   message:,
        //   type: "error",
        //   ccuiCustom: true
        // });
        this.$showErrorMessage("请至少选择一项");
        return;
      }
      var that = this;
      // 拿到选中的数据；
      var val = this.selectVal;
      console.log("this.selectVal", this.selectVal);
      // 如果选中数据存在
      if (val) {
        // 将选中数据遍历
        val.forEach(function (item, index) {
          // 遍历源数据
          that.tableData.forEach(function (itemI, indexI) {
            // 如果选中数据跟元数据某一条标识相等，删除对应的源数据
            if (item.id & (item.id === itemI.id)) {
              that.tableData.splice(indexI, 1);
            } else if (item.invoiceNo == itemI.invoiceNo) {
              that.tableData.splice(indexI, 1);
            }
          });
        });
      }
      this.$bus.$emit("tableLength", this.tableData.length);
      // 清除选中状态
      this.$refs.tableList.clearSelection();
    },
    getSelect(value) {
      console.log(value);
    },
    // 批量设置发票类型
    VolumeSet() {
      if (this.selectVal.length <= 0) {
        // this.$message({
        //   showClose: true,
        //   message: ,
        //   type: "error",
        //   ccuiCustom: true
        // });
        this.$showErrorMessage("请至少选择一项");
        return;
      }
      this.dialogVisible = true;
    },
    handleSelect(val) {
      this.selectItem = val;
    },
    // 确定
    conformChange() {
      this.selectVal.forEach((e) => {
        if (e.state != 1) {
          e.invoiceTypeName = this.selectItem;
        }
        console.log(e.invoiceTypeName);
      });
      this.dialogVisible = false;
      this.$refs.tableList.clearSelection();
    },
    // 上传成功
    onSuccess({ message, data }) {
      // this.$message({
      //   showClose: true,
      //   message: message,
      //   type: "success",
      //   ccuiCustom: true
      // });
      this.uploadLoading.close();
      this.setInvoiceOcr(data[0].downloadUrl);
    },
    // 文件上传失败时的钩子
    onError({ message }) {
      //   this.$message({
      //     showClose: true,
      //     message: ,
      //     type: "error",
      //     ccuiCustom: true
      //   });
      this.$showErrorMessage(message);
      this.uploadLoading.close();
    },
    // 文件上传时的钩子
    onProgress() {
      this.uploadLoading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    // 上传文件之前的钩子，参数为上传的文件
    beforeUpload({ name, size }) {
      console.log({ name, size });
      const suffix = name.substring(name.lastIndexOf("."));
      const isLt50 = size <= 1024 * 1024 * 5;
      let fileType = this.getUploadFileRules.includes(suffix);
      console.log(isLt50);
      if (!isLt50) {
        this.$showErrorMessage("文件大小不超过5M!");
      }
      if (!fileType) {
        // this.$message({
        //   showClose: true,
        //   message: ,
        //   type: "error",
        //   ccuiCustom: true,
        //   duration: 0
        // });
        this.$showErrorMessage("上传文件格式错误！");
      }
      return fileType;
    },
    // 设置上传的请求头部
    // headers(){},
    // 接受上传的文件类型
    // uploadRule(){

    // },
    must(obj) {
      if (
        obj.columnIndex == 0 ||
        obj.columnIndex == 1 ||
        obj.columnIndex == 9 ||
        obj.columnIndex == 10 ||
        obj.columnIndex == 11
      ) {
        return;
      } else {
        return "must";
      }
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (
          [
            "priceTaxTotal",
            "deductionRate",
            "amountExcludeTax",
            "tax",
            "deductionTax",
          ].includes(column.property)
        ) {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                let num = Number(prev) + Number(curr);
                return num;
              } else {
                return Number(prev);
              }
            }, 0);
            if (
              column.label == "税率" ||
              column.label == "价税合计" ||
              column.label == "税额" ||
              column.label == "不含税金额"
            ) {
              sums[index] = Number(sums[index]).toFixed(2);
            }
          }
        }
      });
      //价税合计总计传到发票信息 价税合计=本次收票金额（基本信息）
      // sums.forEach((e, i) => {
      //   if (i == 5) {
      //     this.$bus.$emit("priceTaxTotalSum", e);
      //   }
      // });
      return sums;
    },
    // 价税合计--
    blurPriceTaxTotal(e, row) {
      if (isNaN(e.target.value * 1)) {
        row.priceTaxTotal = "";
      } else {
        if (e.target.value * 1 < 0) {
          row.priceTaxTotal = "";
        } else {
          row.priceTaxTotal = formatNumber(Number(e.target.value), 2);
        }
      }
      this.$bus.$emit("priceTaxTotalSum", Number(row.priceTaxTotal).toFixed(2));
    },
    // 抵扣税率
    blurRate(e, row) {
      if (isNaN(e.target.value * 1)) {
        row.deductionRate = "";
      } else {
        if (e.target.value * 1 < 0) {
          row.deductionRate = "";
        } else {
          row.deductionRate = Number(e.target.value).toFixed(2);
        }
      }
    },
    // 税额--
    blurTax(e, row) {
      if (isNaN(e.target.value * 1)) {
        row.tax = "";
      } else {
        if (e.target.value * 1 < 0) {
          row.tax = "";
        } else {
          row.tax = formatNumber(Number(e.target.value), 2);
        }
      }
    },
    // 不含税金额--
    blurAmountExcludeTax(e, row) {
      if (isNaN(e.target.value * 1)) {
        row.amountExcludeTax = "";
      } else {
        if (e.target.value * 1 < 0) {
          row.amountExcludeTax = "";
        } else {
          row.amountExcludeTax = formatNumber(Number(e.target.value), 2);
        }
      }
    },
  },
  computed: {
    ...mapGetters(["getUploadFileRules"]),
  },
  activated() {
    // this.getPostGetEnum();
  },
  mounted() {
    //   this.getPostGetEnum()
  },
};
</script>

<style scoped lang="scss">
/deep/ .el-table th.must > .cell:before {
  content: "* ";
  color: #ff1818;
}

.el-table {
  /deep/ .el-table__fixed-right {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
  /deep/.el-table__fixed {
    height: 100% !important; //设置高优先，以覆盖内联样式
  }
}
/deep/
  .ccui-form-child-table
  .el-table
  .el-table__footer-wrapper
  tbody
  td:nth-child(1) {
  color: #4a4a4a;
}
/deep/ .el-table__footer-wrapper tbody td {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  color: #0089ef;
}
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}

/deep/ .el-table__fixed,
/deep/.el-table__fixed-right {
  pointer-events: none;
  td {
    pointer-events: auto;
  }
}
::v-deep {
  .el-input input {
    // padding-right: 50px;
    padding-right: 0px;
  }
  
}
/deep/ .el-table__row {
    td:nth-child(10) {
      .cell {
        .el-input--suffix {
          width: 190px;
        }
      }
    }
  }

.el-button.el-button--single-number i {
  left: 73px !important;
}

.tips {
  font-size: 12px;
  width: 193px;
  margin-right: 270px;
  margin-top: 5px;
  position: absolute;
  display: block;
  color: #a6a6bf;
}
</style>
